import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart';
import 'package:wan_android/model/user/user_page_model.dart';
import 'package:wan_android/pages/home_page/home_page.dart';

enum NavType {
  FAV,
  SETTINGS,
  UPDATE,
  COLOR
}

class MinePage extends StatefulWidget {
  const MinePage({super.key});

  @override
  State<MinePage> createState() => _MinePageState();
}

class _MinePageState extends State<MinePage> {

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  Widget _listItem(NavType type, IconData icon, String title ) {
    return InkWell(
      onTap: () {
        switch(type) {
          case NavType.FAV:
            // navigate to favorite page
            context.push('/fav');
            break;
          case NavType.SETTINGS:
            // navigate to settings page
            context.push('/settings');
            break;
          case NavType.UPDATE:
            // navigate to update page
            context.push('/update');
            break;
          case NavType.COLOR:
            // navigate to color page
            print('主题单独设置');
            break;
        }
      },
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 40.h, horizontal: 20.w),
        decoration: const BoxDecoration(
          border: Border(
            bottom: BorderSide(width: 1, color: Color.fromARGB(26, 78, 77, 77))
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Padding(
                  padding: EdgeInsets.only(right: 20.w),
                  child: Icon(icon, color: const Color.fromARGB(255, 66, 165, 245),),
                ),
                Text(title)
              ],
            ),
            const Icon(Icons.arrow_forward_ios_outlined)
          ],
        ),
      )
    );
  }

  @override
  Widget build(BuildContext context) {
    final UserPageModel userPageModel = Provider.of<UserPageModel>(context, listen: false);
    // userPageModel.getStorageInfo();

    return Scaffold(
      body: Stack(
        children: [
          ClipPath(
            clipper: HalfCircleClipper(),
            child: Container(
              height: 600.h,
              color: Colors.blueAccent,
            ),
          ),

          Positioned(
            left: 0,
            right: 0,
            top: 100.h,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                CircleAvatar(
                  radius: 100.w,
                  backgroundImage: const NetworkImage('https://cdn.uviewui.com/uview/album/1.jpg')
                ),
                SizedBox(height: 10.h),

                // Consumer<UserPageModel>(
                //   builder: (context, vm, child) {
                //     if (vm.userInfo == null) {
                //       return TextButton(
                //         child: Text('点击登录', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 32.sp)),
                //         onPressed: () {
                //           context.push('/login');
                //         },
                //       );
                //     }
                //     return Text(vm.userInfo!.nickname, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 32.sp));
                //   },
                // ),

                FutureBuilder( // 获取用户信息是否存在
                  future: userPageModel.getStorageInfo(),
                  builder: (context, snapshot) {
                    if (snapshot.connectionState == ConnectionState.waiting) {
                      return const CircularProgressIndicator();
                    } else {
                      return Consumer<UserPageModel>(
                        builder: (context, vm, child) {
                          if (vm.userInfo == null) {
                            return TextButton(
                              child: Text('点击登录', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 32.sp)),
                              onPressed: () {
                                context.push('/login');
                              },
                            );
                          }
                          return Column(
                            children: [
                              Text(vm.userInfo!.nickname, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 32.sp)),
                              Text('积分: ${vm.userInfo!.coinCount}',style: TextStyle(color: Colors.white, fontSize: 28.sp, decoration: TextDecoration.underline, decorationColor: Colors.white))
                            ],
                          );
                        },
                      );
                    }
                  }
                )
              ]
            )
          ),

          Column(
            children: [
              SizedBox(height: 500.h,),
              Expanded(
                child:  ListView(
                  padding: EdgeInsets.symmetric(horizontal: 60.w),
                  children: [
                    _listItem(NavType.FAV, Icons.favorite_border_outlined, '收藏'),
                    _listItem(NavType.COLOR, Icons.draw_outlined, '色彩主题'),
                    _listItem(NavType.SETTINGS, Icons.settings_outlined, '设置'),
                    _listItem(NavType.UPDATE, Icons.system_update, '检查更新'),
                  ],
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

class HalfCircleClipper extends CustomClipper<Path> {

  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(0, size.height / 2); // 从左上角到左边中间
    path.quadraticBezierTo(
      size.width / 2, size.height, // 控制点
      size.width, size.height / 2 // 终点
    );
    path.lineTo(size.width, 0); // 从中间到右上角
    path.close(); // 闭合路径
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
